<template>
  <div id="pictureList">
    <!-- 图片列表 -->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <!-- 给图片卡片添加点击事件 -->
          <div class="picture-card" @click="doClickPicture(picture)">
            <img
              :alt="picture.name"
              :src="picture.thumbnailUrl ?? picture.url"
              class="picture-image"
            />
            <div class="picture-overlay">
              <div class="overlay-content">
                <h3>{{ picture.name }}</h3>
                <a-flex>
                  <a-tag color="cyan">
                    {{ picture.category ?? '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in picture.tags" color="blue" :key="tag">{{ tag }}</a-tag>
                </a-flex>
              </div>
            </div>
          </div>

          <div class="actions-bg" v-if="showOp">
            <a @click="doEdit(picture)">
              <EditOutlined />
              编辑
            </a>
            <a @click="doDelete(picture)" class="delete">
              <DeleteOutlined />
              删除
            </a>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
// 引入图标组件
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { deletePictureUsingPost } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'

interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
  showOp?: boolean
  onReload?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
})
//编辑
const doEdit = (picture) => {
  router.push({
    path: '/add_picture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    }
  })
}

//删除
const doDelete = async (picture) => {
  const id = picture.id
  if (!id) {
    return
  }

  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    props.onReload?.()

  } else {
    message.error('删除失败' + res.data.message)
  }
}

// 点击图片跳转页面
const router = useRouter()
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}
</script>

<style scoped>
#pictureList .search-bar {
  max-width: 560px;
  margin: 0 auto 20px;
}

#pictureList .tab-bar {
  margin-bottom: 16px;
}

.picture-card {
  position: relative;
  overflow: hidden;
  /* 调整为长条比例，高度大于宽度 */
  aspect-ratio: 3 / 4;
  border-radius: 10px; /* 添加圆角 */
}

.picture-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px; /* 图片也添加圆角 */
}

.picture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: white;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 10px; /* 遮罩也添加圆角 */
}

.picture-card:hover .picture-overlay {
  opacity: 1;
}

.overlay-content {
  width: 100%;
}

.overlay-content h3 {
  margin: 0 0 5px 0;
  color: #ffffff;
}

/* 为 actions 区域添加背景色 */
.actions-bg {
  background-color: #f0f2f5; /* 设置背景色，可按需调整 */
  padding: 12px; /* 设置内边距 */
  border-bottom-left-radius: 8px; /* 左下角圆角 */
  border-bottom-right-radius: 8px; /* 右下角圆角 */
  text-align: center; /* 内容居中 */
  display: flex; /* 使用 flex 布局 */
  justify-content: space-around; /* 均匀分布子元素 */
  width: 100%; /* 宽度占满父元素 */
  box-sizing: border-box; /* 包含内边距和边框 */
}

/* 调整图标样式 */
.actions-bg > a {
  flex: 1; /* 让每个按钮平均分配宽度 */
  margin: 0 8px; /* 设置图标间距 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  color: #1890ff; /* 设置图标颜色 */
  text-decoration: none; /* 去除下划线 */
}

.actions-bg > a:hover {
  color: #0b4b8e; /* 鼠标悬停时图标颜色 */
}

.actions-bg > a.delete {
  color: #f5222d; /* 删除图标颜色 */
}

.actions-bg > a.delete:hover {
  color: #850c0c; /* 删除图标悬停颜色 */
}
</style>
